---
title: Textarea
description: Used to enter multiple lines of text.
links:
  source: components/textarea
  storybook: components-textarea--basic
  recipe: textarea
---

<ExampleTabs name="textarea-basic" />

## Anatomy

```jsx
import { Textarea } from '@saas-ui/react/textarea'
```

```jsx
<Textarea placeholder="..." />
```

## Examples

### Variants

Use the `variant` prop to change the appearance of the textarea.

<ExampleTabs name="textarea-with-variants" />

### Sizes

Use the `size` prop to change the size of the textarea.

<ExampleTabs name="textarea-with-sizes" />

### Helper Text

Pair the textarea with the `Field` component to add helper text.

<ExampleTabs name="textarea-with-helper-text" />

### Error Text

Pair the textarea with the `Field` component to add error text.

<ExampleTabs name="textarea-with-error-text" />

### Field

Compose the textarea with the `Field` component to add a label, helper text, and
error text.

<ExampleTabs name="input-with-field" />

### Hook Form

Here's an example of how to integrate the textarea with `react-hook-form`.

<ExampleTabs name="textarea-with-hook-form" />

### Resize

Use the `resize` prop to control the resize behavior of the textarea.

<ExampleTabs name="textarea-with-resize" />

### Autoresize

Here's an example of how to integrate the `react-textarea-autosize` package to
make the textarea autoresize.

<ExampleTabs name="textarea-with-autoresize" />

## Props

<PropTable component="Textarea" part="Textarea" />
